<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原来的div</div>
    <div class="test1">我是要被删除的div</div>
    <ul class="test2">
        <li>1234564789</li>
    </ul>
    <span>25555</span>
    <script>
        $(function(){
            //创建元素
            var li = $("<li>我是后来添加的li</li>");
            var li1 = $("<li>我是后来添加的li</li>")
            //内部添加元素 append放到内容的最后面  
            $("ul").append(li);
            $("ul").prepend(li1);//放到内容的最前面

            //外部添加
            //element.after("内容")  放在目标的后面
            //element.before("内容")  放在目标的前面
            var div = $("<div>我是后妈生的</div>");
            var div1 = $("<div>我是亲妈生的</div>");
            $("div").after(div);
            $(".test").before(div1);
            
            //删除元素 element.remove() //删除匹配的元素（本身）
            $(".test1").remove();
            //element.empty() 删除匹配的元素集合中所有的子节点
            $(".test2").empty();

            //element.html("") 清空匹配的元素内容
            $("span").html("");
        })
    </script>
</body>
</html>